<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>pod终端</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="/css/xterm-v5.3.0.css" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/xterm-v5.3.0.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/sockjs.min.js"></script>
    <style>
        #terminal-container{
            margin: 0 auto;
        }
        #connect {
            margin: 0 auto;
        }
        #terminal-container a {
            color: #fff;
        }
        .panel-body{
            background-color: #000;
        }
        .xterm-rows {
            color: #e9e7e7;
            font-size: 14px;
        }
    </style>
</head>
<body>
                <div style="heigth:100vh;width:300%;" id="terminal-container"></div>
<script>

     $(document).ready(function(){
         ws_connect();
     });

     var cols = parseInt(document.body.clientWidth / 9)
     var rows = parseInt(document.documentElement.clientHeight / 15)

     var term = new Terminal({
         "backgroundColor":'#fff',
         "cursorBlink":true,
	       "cols":cols,
	       "rows":rows,
         "fontSize":22,
         "fontWeight":'bold',
         "scrollBack":400,
     });

    function ws_connect(){
        var socket

        //container = document.getElementById('terminal-container');

        url = '/public/pod/terminal/ws' + location.search
        socket = new SockJS(url);

        //$("#terminal-container").html("")

        term.open(document.getElementById('terminal-container'));

        //term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

        term.onData(data => {
            if (socket.readyState == 1) {
                socket.send(data);
            }
        });

        socket.onmessage = function (e) {
            term.write(e.data);
        };

        socket.onclose = function (e) {
             term.write("session is close");
        };

        socket.onopen = function () {
		//console.log('onopen');
                resize(socket);
        };

        window.onresize=function(){
		//console.log('onresize');
                resize(socket)
        }
    }

    function resize(socket) {
	//console.log('resize');
        cols=parseInt(document.body.clientWidth / 9)
        rows=parseInt(document.documentElement.clientHeight / 15)
        term.resize(cols,rows)
        socket.send('{"cols":'+cols+',"rows":'+rows+'}')
    }
</script>

</body>
</html>
